<template>

  <div class="container">

    <div>
      父组件 ：name ：{{ name }} attack：{{ attack }} <button @click="changeName">修改父组件中的name</button>
    </div>
    <Hero :name="name" :attack="attack" :changeName="changeName"></Hero>


  </div>



</template>

<script setup lang="ts" name='App'>
import { ref, reactive } from "vue";

import Hero from "./components/Hero.vue";
import Employee from "./components/Employee.vue";



let name = ref("赵六");
let attack = ref(900);



//定义方法修改父组件中的 name
function changeName() {
  name.value = name.value + '~'
}




</script>

<style scoped>
.container {

  width: 60%;
  min-height: 300px;
  background-color: rgb(233, 218, 81);
  padding: 50px;


}
</style>